<template>
	<div class="tab_group" :key="radom">
	  <div @click="onChange(item)" class="f-trans10" :class="finallClass(item)" v-for="item in items" :key="item.value">
		<div class="tab-icon f-trans10"></div>
		<span class="f-dib f-tac"> {{ item.name }}</span>
	  </div>
	</div>
  </template>
  
  <script>
  export default {
	props: {
	  items: {
		type: Array,
		default: function () {
		  return [
			{ name: "选项1", value: "1" },
			{ name: "选项2", value: "2" },
		  ];
		},
	  },
	  multiple: {
		type: Boolean,
		default: false,
	  },
	  active: {
		type: [String, Number, Array],
		default: function () {
		  return [];
		},
	  },
	  defaultClass: {
		type: String,
		default: "default-class",
	  },
	  checkedClass: {
		type: String,
		default: "checked-class",
	  },
	},
	data() {
	  return {
		radom: Math.random(),
	  };
	},
	computed: {},
	methods: {
	  finallClass(item) {
		if (this.multiple) {
		  return [Array.isArray(this.active) && this.active.includes(item.value) ? this.checkedClass : this.defaultClass];
		}
		return [this.active === item.value ? this.checkedClass : this.defaultClass];
	  },
	  onChange(key) {
		// 禁用情况下不触发数据更新.
		if (key.disabled) {
		  this.$emit("change", key);
		  return;
		}
  
		if (this.multiple) {
		  let newActive = [...this.active];
		  const index = newActive.indexOf(key.value);
		  if (index > -1) {
			newActive.splice(index, 1);
		  } else {
			newActive.push(key.value);
		  }
		  this.$emit("update:active", newActive);
		} else {
		  this.$emit("update:active", key.value);
		}
		this.$emit("change", key);
	  },
	},
  };
  </script>
  
  <style lang="less">
  .tab_group {
	display: flex;
  }
  .tab_cont {
	.itemDefault,
	.itemCheck {
	  width: 120px;
	  height: 70px;
	  text-align: center;
	  cursor: pointer;
	}
  }
  
  .tab_cont .itemDefault {
	background: greenyellow;
  }
  
  .tab_cont .itemCheck {
	background: orange;
  }
  
  /* 顺序用于插入不同icon. */
  .tab_cont .itemDefault:nth-child(2) {
  }
  </style>